{% extends "PHPDishWebBundle::layout.html.twig" %}

{% block root %}
    <div class="book with-summary" data-role="book-detail">
        <div class="book-summary" data-role="summary">
            <nav role="navigation">
                <ul class="summary">
                    <li class="book-name"><a href="{{ path('book_view', {'slug': book.slug}) }}" class="custom-link">{{ book.name }}</a></li>
                    <li class="divider"></li>
                    {% for _character in book.posts %}
                    <li class="chapter {% if character.id == _character.id %}active{% endif %}">
                        <a href="{{ path('book_character_view', {'slug': book.slug, 'characterId': _character.id}) }}">{{ _character.title }}</a>
                        {#<ul class="articles">#}
                            {#<li class="chapter " data-level="1.2.1" data-path="array/remove_element.html">#}
                                {#<a href="array/remove_element.html">Remove Element</a>#}
                            {#</li>#}
                        {#</ul>#}
                    </li>
                    {% endfor %}
                </ul>
            </nav>
        </div>
        <div class="book-body" data-role="body">
            <div class="body-inner">
                <div class="book-header" role="navigation">
                    <!-- Title -->
                    <a class="btn pull-left js-toolbar-action" aria-label="" href="#"><i class="fa fa-align-justify"></i></a><div class="dropdown pull-right js-toolbar-action"><a class="btn toggle-dropdown" aria-label="Share" href="#"><i class="fa fa-share-alt"></i></a><div class="dropdown-menu dropdown-left"><div class="dropdown-caret"><span class="caret-outer"></span><span class="caret-inner"></span></div><div class="buttons"><button class="button size-5 ">Facebook</button><button class="button size-5 ">Google+</button><button class="button size-5 ">Twitter</button><button class="button size-5 ">Weibo</button><button class="button size-5 ">Instapaper</button></div></div></div><a class="btn pull-right js-toolbar-action" aria-label="" href="#"><i class="fa fa-facebook"></i></a><a class="btn pull-right js-toolbar-action" aria-label="" href="#"><i class="fa fa-twitter"></i></a><div class="dropdown pull-left font-settings js-toolbar-action"><a class="btn toggle-dropdown" aria-label="Font Settings" href="#"><i class="fa fa-font"></i></a><div class="dropdown-menu dropdown-right"><div class="dropdown-caret"><span class="caret-outer"></span><span class="caret-inner"></span></div><div class="buttons"><button class="button size-2 font-reduce">A</button><button class="button size-2 font-enlarge">A</button></div><div class="buttons"><button class="button size-2 ">Serif</button><button class="button size-2 ">Sans</button></div><div class="buttons"><button class="button size-3 ">White</button><button class="button size-3 ">Sepia</button><button class="button size-3 ">Night</button></div></div></div><h1>
                        <i class="fa fa-circle-o-notch fa-spin"></i>
                        <a href=".">{{ character.title }}</a>
                    </h1>
                </div>
                <div class="page-wrapper" tabindex="-1" role="main">
                    <div class="page-inner">
                        <section class="normal markdown-body">
                            <h1>{{ character.title|raw }}</h1>
                            {{ character.body|raw }}
                        </section>
                    </div>
                </div>
            </div>
            <a href="" class="navigation navigation-left navigation-unique">
                <i class="fa fa-angle-left"></i>
            </a>
            <a href="" class="navigation navigation-next navigation-unique">
                <i class="fa fa-angle-right"></i>
            </a>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript" src="{{ asset('build/js/book.js') }}"></script>
    <script type="text/javascript">
        window.bookId = {{ book.id }};
    </script>
{% endblock %}